<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

    <!-- 条件 -->
    
    <!-- 
    <script>
    <div id="app-3">
        <p v-if="seen">现在你看到我了</p>
    </div>
    <script>
        var app3 = new Vue({
            el:'#app-3',
            
            data:{
                seen:true,
            }
        });
        console.dir(app3) 
    </script>
    -->

        <!-- 循环遍历 -->
        <div id="app-4">
            <ol>
                <li v-for="todo in todos">
                    {{todo.text}}
                </li>
            </ol>
        </div>
        <script>
            var app4 =new Vue({
                el:'#app-4',
                data:{
                    todos:[
                        {text:'学习 Javascript'},
                        {text:'学习 Vue'},
                        {text:'学习 整个项目'}
                    ]
                }
            });
        </script>

</body>
</html>